<div id="test-score-dom">
    <p></p>
    <div class="row">
        <!-- 查找学生 -->
        <div class="col-md-12" v-show="!isStudentExists">
            <form class="form-inline">
                <div class="form-group">
                    <label for="student-no">学员学号</label>
                    <input type="text" v-model="student.studentNo" class="form-control" id="student-no" placeholder="">
                </div>
                <div class="form-group">
                    <label for="student-name">学员姓名</label>
                    <input type="text" v-model="student.studentName" class="form-control" id="student-name"
                        placeholder="">
                </div>
                <input type="button" @click="searchStudent" value="查找" class="btn btn-default">
            </form>
        </div>
        <!-- 学生列表 -->
        <!-- v-is="不识别 -" -->
        <div>
            <table class="table table-bordered">
                <tr v-is="'student-tr'" v-for="st in students" :st="st" :is-student-exists="isStudentExists"
                    @determine-student="determineStudent($event)" @choose-student="chooseStudent">
                </tr>
            </table>
        </div>

        <!-- 查找模板 -->
        <div class="col-md-12" v-show="isStudentExists && !isTemplateExists">
            <form action="" class="form-inline">
                <div class="form-group">
                    <label for="template-name">模板名称</label>
                    <input type="text" v-model="template.templateName" name="" id="template-name" class="form-control">
                </div>
                <input type="button" @click="searchTemplate" value="查找" class="btn btn-default">
            </form>
        </div>
        <!-- 模板列表 -->
        <div>
            <table class="table table-bordered">
                <tr v-is="'template-tr'" v-for="t in templates" :t="t" :is-template-exists="isTemplateExists"
                    @determine-template="determineTemplate($event)" @choose-template="chooseTemplate"></tr>
            </table>
        </div>
    </div>


    <!-- 动态生成表单 -->
    <div class="row" v-show="isTemplateExists">
        <form class="form-horizontal" role="form">
            <div class="form-group">
                <label for="test-score-save-name" class="col-sm-2 control-label">测评成绩名称：</label>
                <div class="col-sm-8">
                    <input type="text" class="form-control" v-model="testScore.scoreName" id="test-score-save-name"
                        placeholder="请输入测评成绩名称">
                </div>
            </div>
            <div v-for="item in templateItems" class="form-group">
                <label class="col-sm-2 control-label">最高分:{{item.itemName}}</label>
                <div class="col-sm-8">
                    <input type="text" @change="changeScore" v-model="item.score" class="form-control"
                        :placeholder="item.itemMaxScore">
                </div>
                <label class="col-sm-2" control-label>占比{{item.itemProportion}}%</label>
            </div>

            <div class="form-group">
                <label class="col-sm-2 control-label">总分：</label>
                <div class="col-sm-8">
                    <input type="text" class="form-control" v-model="testScore.score">
                </div>
            </div>

            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                    <input type="button" @click="subScore" value="提交" class="btn btn-default">
                </div>
            </div>
        </form>
    </div>
  
</div>

<script>
    let appTestScore = Vue.createApp({
        data() {
            return {
                isStudentExists: false, // 是否已经确定好学员了
                isTemplateExists: false, // 是否已经确定测评模版
                student: {}, // 被确定的学员信息
                template: {}, // 被确定的模版信息
                students: [], // 搜索到的学员列表
                templates: [], // 搜索到的模版列表 
                templateItems: [], // 模版项列表
                testScore: {
                    score: 0
                }
            }
        }, methods: {
            searchStudent() {
                axios.get("http://localhost:8080/student/queryByNameAndNo", {
                    params: {
                        name: this.student.studentName,
                        no: this.student.studentNo
                    }
                }).then((res) => {
                    // 搜索成功将查询的学员列表设置到当前this.students中
                    this.students = res.data.data;
                });
            }, searchTemplate() {
                axios.get("http://localhost:8080/template/queryByName", {
                    params: {
                        templateName: this.template.templateName
                    }
                }).then((res) => {
                    this.templates = res.data.data
                });
            },
            //确定学生
            determineStudent(sNo) {
                //alert(sNo)
                //返回选择的
                this.students = this.students.filter((stu) => {
                    return stu.studentNo == sNo
                })
                this.student = this.students[0];
                //搜索栏不显示
                this.isStudentExists = true;
                //给testScore设置学员编号

                this.testScore.studentNo=sNo

            },
            //重新选择
            chooseStudent() {
                //清空
                this.student = {}
                this.students = []
                //显示搜索栏
                this.isStudentExists = false
            },
             determineTemplate(tid) {
                this.templates = this.templates.filter((t => t.templateId == tid))
                this.template = this.templates[0]
                this.isTemplateExists = true
                //加载模板项
                axios.get("http://localhost:8080/templateItem/queryByTempId", { params: { templateId: tid } }).then((res) => {
                    this.templateItems = res.data.data
                })
                //给testScore 绑定 templateId
                this.testScore.templateId=tid


            }, chooseTemplate() {
                this.template = {}
                this.templates = []
                this.isTemplateExists = false
            },
            changeScore() {
                let score = 0;
                for (let item of this.templateItems) {
                    if (item.score) {
                        score += item.score * (item.itemProportion / 100) / (item.itemMaxScore / 100)
                    }
                }
                this.testScore.score = score;
                console.log(this.score);
            },
            subScore() {
                // 提交this.testScore和this.templateItems
                axios.post("http://localhost:8080/testScore/save", { testScore: this.testScore, scoreItems: this.templateItems }).then((res) => {

                    if (res.data.status = 200) {

                        showMsg("保存成功", "测评成绩")
                        //清空
                        this.isStudentExists = false // 是否已经确定好学员了
                        this.isTemplateExists = false // 是否已经确定测评模版
                        this.student = {} // 被确定的学员信息
                        this.template = {}// 被确定的模版信息
                        this.students = [] // 搜索到的学员列表
                        this.templates = [] // 搜索到的模版列表 
                        this.templateItems = []// 模版项列表
                        this.testScore = {
                            score: 0
                        }
                    } else {
                        showMsg("保存失败", "测评成绩")
                    }




                })
            }
        },
    });
    appTestScore.component("student-tr", {
        props: ['st', 'isStudentExists'],
        emits: ['determineStudent', 'chooseStudent'],
        template: `<tr>
            <td>学员名字：{{st.studentNo}}</td>
            <td>学员姓名：{{st.studentName}}</td>
            <td>性别：{{st.studentGender==1?'男':st.studentGender==2?'女':'不明'}}</td>
            <td>电话：{{st.studentTel}}</td>
            <td>
                <input @click="$emit('determineStudent',st.studentNo)" value="确定" v-show="!isStudentExists" type="button" class="btn btn-default">
                <input @click="$emit('chooseStudent')" value="重新选择" v-show="isStudentExists" type="button" class="btn btn-default">
            </td>
            </tr>`
    });
    appTestScore.component("template-tr", {
        props: ['t', 'isTemplateExists'],
        emits: ['determineTemplate', 'chooseTemplate'],
        template: `<tr>
            <td>模版名称:{{t.templateName}}</td><td><a class="btn">查看模版项明细</a></td>
            <td>
                <input v-show="!isTemplateExists" type="button" value="确定" @click="$emit('determineTemplate',t.templateId)">
                <input v-show="isTemplateExists" type="button" value="重新选择模版" @click="$emit('chooseTemplate')">
            </td>
            </tr>`
    })
    appTestScore.mount("#test-score-dom")
</script>